<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" right-text="编辑" title="我的收藏" @clickLeft="leftBack" @clickRight="rightEdit" background-color="#318cff" color="#fff"></uni-nav-bar>
		<view>
			<block v-for="(item,index) in list">
				<navigator :url="`/pages/home/details?pId=${item.pId}`" class="dfj-flex dfj-flex-ai-c dfj-bg-white dfj-mg-t-20 dfj-pd-20">
					<view v-if="isCheckeds">
						<checkbox value="cb" checked="true" />
					</view>
					<view class="dfj-flex-1 dfj-flex dfj-flex-ai-c">
						<view><image class="dfj-bd-radius-20" style="width: 180rpx;height: auto;vertical-align: top;" mode="widthFix" :src="item.iconUrl"></image></view>
						<view class="dfj-mg-l-25">
							<view class="dfj-t-666 dfj-f-28">{{ item.productTitle }}</view>
							<view class="dfj-f-35 dfj-t-danger dfj-mg-t-25">￥{{ item.productPrice }}</view>
						</view>
					</view>
				</navigator>
			</block>
		</view>
		
		<view class="car-bottom dfj-flex dfj-flex-ai-c" v-if="isCheckeds">
			<view class="dfj-flex-1"><checkbox value="cb" checked="true" /> <text class="dfj-v-m">全选</text></view>
			<view>
				<button class="car-bottom-btn" size="mini">删除</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCheckeds: false,
				page: 1,
				list: []
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			leftBack() {
				uni.navigateBack();
			},
			getList(){
				this.$http({
					url: '/userOpt/getCollectList',
					data: {
						page: this.page
					}
				}).then(res=>{
					if(res.data.list.length>0){
						this.page++;
						this.list.push(...res.data.list)
					}
				})
			},
			rightEdit() {
				this.isCheckeds = !this.isCheckeds
			}
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.car-bottom{
		position: fixed;
		background: #fff;
		left: 0;
		right: 0;
		bottom: 95rpx;
		z-index: 99;
		padding: 10rpx 30rpx;
		.car-bottom-btn{
			background: #318CFF;
			color: #fff;
			border-radius: 50rpx;
			vertical-align: top;
		}
	}
</style>
